<template>
  <div class="card-container">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>芝麻分数</span>
        <div class="button-container">
          <el-button v-for="(button, index) in buttons" :key="index" :style="buttonStyle(index)"
            @click="handleButtonClick(index)">
            {{ button }}
          </el-button>
        </div>
      </div>
      <div>
        <ul>
          <li v-for="(item, index) in dataList" :key="index" class="data-item">
            <div class="data-info">
              <span class="data-name">{{ item.name }}：</span>
              <span class="data-number">{{ item.number || 0 }}</span>
            </div>
            <el-progress :percentage="calculatePercentage(item)" class="progress-bar"></el-progress>
          </li>
        </ul>
      </div>
    </el-card>

    <div class="card-gap"></div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>另一个卡片</span>
        <div class="button-container">
          <el-button v-for="(button, index) in buttons" :key="index" :style="buttonStyle(index)"
            @click="handleButtonClick(index)">
            {{ button }}
          </el-button>
        </div>
      </div>
      <div>
        <ul>
          <li v-for="(item, index) in dataList" :key="index" class="data-item">
            <div class="data-info">
              <span class="data-name">{{ item.name }}：</span>
              <span class="data-number">{{ item.number || 0 }}</span>
            </div>
            <el-progress :percentage="calculatePercentage(item)" class="progress-bar"></el-progress>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.box-card {
  flex: 1; /* 占据可用空间的四分之一 */
  margin: 0 10px; /* 间隔的宽度，可以根据需要调整 */
  max-width: calc(25% - 20px); /* 设置最大宽度，考虑间隔的宽度 */
}

.card-container {
  display: flex; /* 使用Flex布局 */
  flex-wrap: wrap; /* 允许换行 */
  margin: 0 -10px; /* 为了处理间隔，设置负外边距 */
}
.card-gap {
  width: 20px; /* 间隔的宽度，可以根据需要调整 */
}

.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.data-item {
  margin-bottom: 20px;
  font-size: 16px;
  color: #333;
}

.data-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.data-name {
  font-weight: bold;
  margin-right: 10px;
}

.data-number {
  color: #007bff;
}

.progress-bar {
  width: 100px;
}

</style>

<script>
import { listZhiMa } from "@/api/index/index";
export default {
  data() {
    return {
      buttons: ['今天', '昨天', '近三天', '近五天'],
      selectedIndex: 0,
      dataList: [], // 用于存储接口返回的数据
    };
  },
  methods: {
    handleButtonClick(index) {
      this.selectedIndex = index;
      this.handleType(index);
    },
    handleType(type) {
      listZhiMa(type)
        .then((response) => {
          if (response.data && response.data.dataList) {
            this.dataList = response.data.dataList;
          }
        })
        .catch((error) => {
          console.error('请求失败', error);
        });
    },
    calculatePercentage(item) {
      const total = this.dataList.find((data) => data.name === '全国').number;
      if (total === 0) {
        return 0;
      }
      return (item.number / total) * 100;
    },
    buttonStyle(index) {
      return {
        backgroundColor: this.selectedIndex === index ? '#007bff' : 'transparent',
        color: this.selectedIndex === index ? '#fff' : '#000',
        padding: '3px 0',
        fontSize: '14px',
        cursor: 'pointer',
      };
    },
  },
  mounted() {
    this.handleButtonClick(0);
  },
};
</script>
